import React from 'react';
import { Input, Button, Icon, Upload } from 'antd'
import style from './style.less';

class UploadPhoto extends React.Component {

    state = {
        loading: false,
        imgPreviewSrc: '',
        imgFile: '',
        value: ''
    }

    uploadHandle = ( e ) => {

        const file = e.nativeEvent.target.files[ 0 ];

        const filePreviewSrc = window.URL.createObjectURL( file );

        this.setState( {
            imgPreviewSrc: filePreviewSrc,
            imgFile: file
        } )
    }

    submitFn = () => {
        this.props.submitFn( this.state.value );
    }

    render() {
        return (
            <div className={style.upload}>
                <div className={style.uploadComponent}>
                    <div className={style.uploadInput}>
                        <Input value={this.state.value} onChange={( e ) => {
                            this.setState( { value: e.target.value } )
                        }}/>

                            <Icon type={this.state.loading ? 'loading' : 'upload'} className={style.uploadIcon}/>

                            <input type="file" className={style.realUploadBtn} onChange={this.uploadHandle}/>

                            </div>

                            <Button type="primary" className={style.uploadBtn} onClick={this.submitFn}>提交</Button>
                            </div>

                            {
                                this.state.imgPreviewSrc
                                    ? <div className={style.imgPreview}>
                                        <img src={this.state.imgPreviewSrc} alt=""/>
                                    </div>

                                    : null
                            }


                            </div>
                            )
                            }
                        }

                        export default UploadPhoto;